<template>
  <div class="app-container">
    <el-button type="primary" plain @click="add()">新增</el-button>

    <div style="float: right;">
      <el-input @keyup.enter.native="search" v-model="searchContent" style="width: 200px;" placeholder="通过车位编号搜索"
        @change="init"></el-input>
      <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
    </div>


    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column width="100px" align="center" label="车位ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="所属小区">
        <template slot-scope="scope">
          <span>{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="车位编号">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="车位性质">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column width="250px" align="center" label="车位创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>&nbsp;
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column width="250px" align="center" label="车位更新时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>&nbsp;
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="update(scope.row)" circle title="修改车位">
          </el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="delInfo(scope.row)" circle title="删除车位">
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- page-size 默认每页显示条数 -->
    <div class="block" style="float: right;">
      <el-pagination @size-change="selectPage" @current-change="handleCurrentChange" :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">
      <el-form ref="form" label-width="100px">
        <el-form-item label="所属小区名称">
          <el-col :span="22">
            <input type="hidden" v-model="parkingForm.id" />
            <el-input placeholder="请输入小区名称" v-model="parkingForm.communityName"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="所属小区ID">
          <el-col :span="22">
            <el-input placeholder="请输入小区ID" v-model="parkingForm.communityId"></el-input>
          </el-col>
        </el-form-item>


        <el-form-item label="车位编号">
          <el-col :span="22">
            <el-input placeholder="请输入车位编号" v-model="parkingForm.code"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="车位性质">
          <el-col :span="22">
            <el-input placeholder="请输入车位名称(公有车位)" v-model="parkingForm.name"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import myUtil from '../../../utils/myUtil'

  export default {
    name: 'parkingList',
    data() {
      return {
        list: [],
        title: "新增",
        parkingForm: {
          id: null,
          communityName: "", //所属小区名称
          communityId: "", //所属小区ID
          code: "", //车位编号
          name: "", //车位名称
          createTime: "", //车位创建时间
          updateTime: "", //车位更新时间
        },
        isShow: false,
        listLoading: true,
        total: 0, // 总条数
        totalPage: 0, // 总页数
        curPage: 1, // 当前页
        rows: 3, // 每页显示条数
        searchContent: "", //搜索内容
        stashList: [],
      }
    },
    methods: {
      //查询分页数据展示到页面，挂载到mouted中
      loaddata() {
        var self = this;
        this.axios({
          methods: 'get',
          url: myUtil.url + '/tb-parking/parks',
          params: {
            "page": self.curPage,
            "row": self.rows
          }
        }).then(function(rs) {
          console.log(rs);
          self.list = rs.data.info;
          self.total = rs.data.total;
          self.totalPage = rs.data.totalPage;
          self.stashList = rs.data.info;
        });
      },
      //打开新增车位模态框
      add() {
        //显示模态框的标题
        this.title = "新增车位";
        //显示vue的模态框
        this.isShow = true;
        //清除表单元素，防止之前的数据显示
        this.parkingForm.id = null;
        this.parkingForm.communityName = "";
        this.parkingForm.communityId = "";
        this.parkingForm.code = "";
        this.parkingForm.name = "";
        this.parkingForm.createTime = "";
        this.parkingForm.updateTime = "";
      },
      //打开修改车位模态框
      update(x) {
        //显示模态框的标题
        this.title = "修改车位";
        //显示vue的模态框
        this.isShow = true;
        //将数据填充到修改模态框中
        this.parkingForm.id = x.id;
        this.parkingForm.communityName = x.communityName;
        this.parkingForm.communityId = x.communityId;
        this.parkingForm.code = x.code;
        this.parkingForm.name = x.name;
        this.parkingForm.createTime = x.createTime;
        this.parkingForm.updateTime = x.updateTime;
      },
      //保存操作
      saveInfo() { //保存
        var url = "";
        var method = "";
        if (this.title == "修改车位") {
          url = myUtil.url + "/tb-parking/updatePark";
          method = "put";
        } else {
          url = myUtil.url + "/tb-parking/insertPark";
          method = "post";
        }
        var self = this;
        //利用vue的axios发送ajax请求
        this.axios({
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          method: method,
          url: url,
          data: JSON.stringify(self.parkingForm),
        }).then(function(rs) {
          console.log(rs.data);
          if (rs.data.info == "保存成功") {
            self.$message({
              message: '车位保存成功',
              type: 'success'
            });
            // 关闭模态框
            self.isShow = false;
            // 刷新
            self.loaddata();
          }
          if (rs.data.info == "所在小区车位编号重复") {
            self.$message.error(rs.data.info);
            // 关闭模态框
            self.isShow = false;
            // 刷新
            self.loaddata();
          }
        })
      },
      delInfo(x) {
        var is = confirm("你确定要删除车位编号为[" + x.code + "]的车位吗?");
        if (is) {
          var self = this;
          this.axios({
            method: 'delete',
            url: myUtil.url + '/tb-parking/deleteParking/' + x.id,
          }).then(function(rs) {
            console.log(rs.data.info);
            if (rs.data.info == "删除成功") {
              //刷新
              self.loaddata();
              console.log("adf");
            }
          });
        } else {
          this.$message('好的，咱不删');
        }
      },

      // 当前页触发事件
      handleCurrentChange(v) {
        this.curPage = v;
        this.loaddata();
      },
      // 用户选择页数
      selectPage(v) {
        this.rows = v;
        this.loaddata();
      },
      search() {
        if (this.searchContent !="") {
          this.list = this.stashList
          this.list = this.list.filter(item => {
            return item.code.includes(this.searchContent)
          })
        } else {
          this.list = this.stashList
        }
      },
      init() {
        if (this.searchContent == "") {
          this.loaddata();
        }
      }
    },
    mounted() {
      this.loaddata();
      //console.log(this.$route.query.info);
    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
